<template>
  <div id="three-map"></div>
</template>

<script>
import * as echarts from "echarts"
import 'echarts-gl';
import geoJson from "../../../common/map/NingBo.json"

export default {
  data() {
    return {
      options: {}
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart: function () {
      const myChart = echarts.init(document.getElementById('three-map'));
      echarts.registerMap('ningbo', geoJson);
      const geoCoordMap = {}
      const chinaDatas = [];
      const riskMap = {}
      geoJson.features.forEach((item) => {
        geoCoordMap[item.properties.name] = item.properties.center
        riskMap[item.properties.name] = item.properties.risk
      })
      geoJson.features.forEach((item) => {
        const riskList = riskMap[item.properties.name]
        const data =  [{
          name: item.properties.name,
          value: riskList[0] * 10 + riskList[1] * 5 + riskList[2]
        }]
        chinaDatas.push(data)
      })
      const convertData = function(data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
          const geoCoord = geoCoordMap[data[i][0].name];
          if (geoCoord) {
            res.push({
              name: data[i][0].name,
              value: geoCoord.concat(data[i][0].value),
            });
          }
        }
        return res;
      };

      const option = {
        backgroundColor: 'rgb(128,128,128,0)',
        visualMap: [{
          type: 'continuous',
          show: false,
          seriesIndex: 0,
          text: ['bar3D'],
          calculable: true,
          max: 60,
          inRange: {
            color: ['#87aa66', '#eba438', '#d94d4c']
          }
        }],
        geo3D: {
          map: 'ningbo',
          roam: true,
          viewControl: {
            autoRotateSpeed: 10,
            distance: 115, //地图视角 控制初始大小
            rotateSensitivity: [1, 1],
          },
          top: '-10%',
          itemStyle: {
            color: '#0d1f53',
            opacity: 1,
            borderWidth: 3,
            borderColor: '#5578A5'
          },
          label: {
            show: true,
          },
          emphasis: { //当鼠标放上去  地区区域是否显示名称
            label: {
              show: true,
              textStyle: {
                color: '#ffffff',
                fontSize: 20,
                backgroundColor: 'rgba(0,23,11,0)'
              },
              itemStyle: {
                color: '#0489d6',
              },
            }
          },
          light: {
            main: {
              color: '#fff', //光照颜色
              intensity: 1.2, //光照强度
              shadowQuality: 'high', //阴影亮度
              shadow: false, //是否显示阴影
              //                        alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [{
          name: 'bar3D',
          type: "bar3D",
          coordinateSystem: 'geo3D',
          barSize: 1, //柱子粗细
          shading: 'lambert',
          opacity: 0.1,
          label: {
            show: false,
            formatter: function(data) {
              console.log(data, riskMap)
              const riskList = riskMap[data.name]
              return `\n  ${data.name}\n\n  高风险：${riskList[0]}  \n  中风险：${riskList[1]}  \n  低风险：${riskList[2]}  \n`
            },
            textStyle: {
              fontSize: 18,
            },
          },
          data: convertData(chinaDatas),
        }]
      }
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
#three-map {
  width: 980px;
  height: 1000px;
}
</style>
